<!--角色管理-->
<template>
  <div style="padding: 15px">
    <el-row :gutter="20">
      <el-col :span="20">
        <el-row>
          <el-col :span="21">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item>
                <el-input clearable @change="fetchTableData()" v-model="roleName">
                  <template slot="prepend">角色名称</template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button plain type="info" @click="fetchTableData()">查询</el-button>
                <el-button plain type="primary" @click="handleBack">清空</el-button>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="3">
            <el-button plain type="success" @click="onAdd()">新增</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-table stripe border v-loading="loading" :data="tableData">
            <el-table-column
              v-for="(item, index) in tableCols"
              :key="index"
              :prop="item.colKey"
              :label="item.label"
              :min-width="item['min-width']"
              :align="item.align"
            ></el-table-column>
            <el-table-column label="状态" min-width="260" fixed="right" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.rolestatus === '1' ? '启用' : '禁用' }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" min-width="260" fixed="right" align="center">
              <template slot-scope="scope">
                <el-button plain type="primary" @click="onEdit(scope.row)">编辑</el-button>
                <el-button plain @click="onDelete(scope.row.roleid)" type="danger">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-col>
    </el-row>
    <role-dialog :edit-data="editData" :visible="visible" @closeDialog="closeDialog" />
  </div>
</template>

<script>
import roleDialog from "./components/roleOptionDialog";

export default {
  name: "index",
  components: {
    roleDialog
  },
  data() {
    return {
      cPage: 1,
      cSize: 10,
      editData: [],
      loading: false,
      tableOptions: {
        stripe: true
      },
      tableCols: [
        {
          label: "角色名称",
          colKey: "rolename",
          align: "center",
          "min-width": "150"
        },
        {
          label: "角色排序",
          colKey: "roleordernum",
          align: "center",
          "min-width": "150"
        }
      ],
      tableData: [],
      roleName: "",
      totalCount: 0,
      currentPage: 1,
      visible: false
    };
  },
  methods: {
    handleBack() {
      this.roleName = "";
      this.fetchTableData();
    },
    onAdd() {
      this.editData[0] = {
        roleid: "",
        rolename: "",
        rolestatus: "",
        roleordernum: "",
        modules: []
      };
      this.visible = true;
    },
    async onEdit(row) {
      try {
        this.editData = [row]; //拷贝
        await this.$api
          .get(
            `http://139.9.249.149:8081/judge/role/module?id=${row.roleid}`,
            {},
            { returnAll: true, autoAlert: false }
          )
          .then(res => {
            this.editData[0].modules = res.data.msg;
            //console.log(this.editData[0].modules)
            this.visible = true;
          });

        //console.log(res);
      } catch (e) {
        console.log(e);
      }
    },
    async onDelete(id) {
      try {
        let result = await this.$confirm(
          "此操作将永久删除该角色, 是否继续?",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning"
          }
        );
        if (result) {
          await this.$api.delete(
            `http://139.9.249.149:8081/judge/role?id=${id}`
          );
          this.fetchTableData(this.cPage, this.cSize);
        }
      } catch (e) {
        console.log(e);
      }
    },
    closeDialog() {
      this.visible = false;
      this.editData = [];
      this.fetchTableData();
    },
    async fetchTableData() {
      //刷新表格数据
      this.loading = true;
      this.$api
        .post(
          `http://139.9.249.149:8081/judge/role/get`,
          { roleName: this.roleName },
          { autoAlert: false, returnAll: true }
        )
        .then(res => {
          this.tableData = res.data.msg;
          this.loading = false;
        });
    }
  },
  created() {
    this.fetchTableData();
  }
};
</script>

<style>
.el-tree-node__label {
  font-size: 12px !important;
}
.setting td {
  height: 20px;
}
.el-checkbox + .el-checkbox {
  margin-left: 0;
}
</style>
